<template>
  <div class="point_map">
    <baidu-map
      class="map"
      center="中国"
      ak="ydQSqxFvhi32yEHGTo8rEqxpvfBMvE85"
      :scroll-wheel-zoom="true"
    >
      <bml-marker-clusterer :averageCenter="true">
        <bm-marker
          v-for="(item, index) of markers"
          :key="index"
          :position="{ lng: item.lng, lat: item.lat }"
        ></bm-marker>
      </bml-marker-clusterer>
    </baidu-map>
  </div>
</template>

<script>
import { BaiduMap, BmlMarkerClusterer, BmMarker } from "vue-baidu-map";
export default {
  data() {
    // }
    return {
      markers: [],
    };
  },
  components: {
    BaiduMap,
    BmlMarkerClusterer,
    BmMarker
  },
  created() {
    // 插入 10 个随机点
    for (let i = 0; i < 10; i++) {
      const position = {
        lng: Math.random() * 40 + 85,
        lat: Math.random() * 30 + 21,
      };
      this.markers.push(position);
    }
    console.log(this.markers);
  },
};
</script>

<style lang="scss" scoped>
.point_map {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.map {
  width: 100%;
  height: 100%;
}
</style>